<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>标签列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="name" label="标签名称">
                <template #default="scope">
                    <el-tag v-model="form.name">{{ scope.row.name }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" width='180'>
                <template #default="scope">
                    <el-button @click="handleOpenDialog(scope.row)" class="edit" size="small">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                    </el-button>
                    <el-button @click="handleRemove(scope.row.id,scope.$index)" size="small" type="danger">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 编辑dialog -->
    <el-dialog  v-model="dialogVisible" title="编辑标签">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="name" label="标签名称">
                <el-input v-model="form.name" />
            </el-form-item>
      </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
                </span>
            </template>
        
    </el-dialog>
</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import Article from '@/api/article';
// import { ElMessage } from 'element-plus';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
let form = ref({ name: '', });
const dialogVisible = ref(false);
// 获取form组件实例对象
let formRef = ref();
//打开编辑弹窗
let handleOpenDialog = (data,i) => {
    dialogVisible.value = true;
    //还原表单
    form.value = { ...data };
}

// 表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入标签名称！', trigger: 'blur' },
        { min: 3, max: 30, message: '账户长度要求3-30个字符之间', trigger: 'blur' },
    ],
  
});
//编辑标签
function handleEdit(formEl) {
    //表单验证
    formEl.validate(async(valid,fields) => {
        //通过验证
        if (valid) {
            //发送ajax
         let{status,msg} = await Article.edit(form.value.id,{...form.value});
         if(status){
            //修改成功
            //操作DOM 
    tableData.value[form.value.id-1].name=form.value.name;
            //关闭弹窗，消息提示
            dialogVisible.value = false;
            ElMessage.success(msg);
         }else{
            //错误提示
            ElMessage.error(msg);
         }
          
        }else{
            console.log('失败字段', fields);
        }
    });
}

//获取标签列表
const tableData = ref([]);
async function loadList() {
    let { status, msg, total, data } = await Article.taglist();
    if (status) {
        tableData.value = data;
    }
}
loadList();
//删除操作
function handleRemove(id, i) {
    ElMessageBox.confirm('确定要删除？', '确认删除', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
          
            let { status, msg } = await Article.move(id)
            if (status) {
                ElMessage.success(msg);
                //操作DOM
                tableData.value.splice(i, 1);
            } else {
                ElMessage.error(msg);
            }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}
</script>
<style scoped>

</style>